<template>
  <!-- <Common/> -->

  <div>
    <Header url="http://www.baidu.com" v-slot="slotProps">
      百度 {{ msg }} {{ slotProps.url }}
      <div slot="header">aafaasdsadas</div>
      <div>gsdgfff</div>
      <div slot="footer">aafaasdsadas</div>
    </Header>
    {{ msg }}
    {{ ruleForm }}
    <button @click="add" ref="btn">{{ msg1 }}</button>

    <router-view></router-view>
    <!-- <router-link to="/test">test</router-link>
    <router-link to="/common">common</router-link>-->
    <button @click="addNum">添加</button>
  </div>
</template>
<script>
import Header from "@/page/header.vue";
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    Header,
  },
  mounted(content) {
    console.log(this, window, content);
  },
  created(content) {
    console.log(this, window, content);
  },
  computed: {
    ...mapState({
      ruleForm: "ruleForm",
    }),
    msg1: {
      set(newVal) {
        console.log(newVal);
      },
      get() {
        return "dsasdddfdfa";
      },
    },
  },
  name: "Main",
  data() {
    return {
      msg: "ceshi",
    };
  },
  methods: {
    change() {
      console.log(`event`, this.msg);
    },
    add() {
      this.msg1 = "aasdfsdfdsfdsfsdfsdsdsdfsdf";
      console.log("compu", this.$refs);
      this.msg = `添加`;
      alert(this.msg);
    },
    addNum() {
      console.log(this.$store);
      this.$store.commit("increment", 2); //使用commit方法调用封装的函数名
    },
  },
};
</script>
<style scoped></style>
